import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import type { ModalProps } from './interface'
import goldCoin from '@/resource/home/jinbi.png'
import avatar from '@/resource/home/avatar.png'
import close from '@/resource/home/close.png'
import edit from '@/resource/home/edit.png'
import radarMap from '@/resource/home/radarMap.png'
// import Store from './store'
export default observer((props: ModalProps) => {
    // const store = useLocalObservable(() => new Store())
    const { visible, onChange, changeIntroduceModalVisible } = props
    const editButton = () => {
        changeIntroduceModalVisible()
        onChange()
    }
    return visible ? (
        <div className={styles.page}>
            <div className={styles.modal}>
                <div className={styles.top}>
                    个人信息
                    <img src={close} onClick={() => onChange()} />
                </div>
                <div className={styles.middle_view}>
                    <div className={styles.person_Info}>
                        <img src={avatar} />
                        <div className={styles.self_Info}>
                            <p>这是昵称</p>
                            <p>
                                <span>23-240</span> | <span>SYB网络创业实训班</span>
                            </p>
                            <div>
                                <img src={goldCoin} /> 23
                            </div>
                        </div>
                    </div>
                    <div className={styles.introduce_view}>
                        <div className={styles.introduce_title}>
                            自我介绍
                            <img src={edit} onClick={editButton} />
                        </div>
                        <div className={styles.content}>我是来自浙江大学24届理学院4班的王胖子，目前是职场小白，同时是个单身科</div>
                    </div>
                    <img src={radarMap} />
                    <div className={styles.label}>
                        <div>稳如泰山</div>
                        <div>稳如泰山</div>
                        <div>稳如泰山</div>
                    </div>
                </div>
            </div>
        </div>
    ) : null
})
